import React, { Component } from 'react'
import { button } from "./nickname.module.css"
import { connect } from "react-redux"
import { Modal, Button, WhiteSpace, Toast } from 'antd-mobile'; 
import {loginer} from "../../../../../../redux/login/action"
import axios from "axios"
const prompt = Modal.prompt;
class nickname extends Component {
    componentDidMount() {
        console.log(this.props.user.data.username)
        this.setState({
            value : this.props.user.data.username
        })
    }
    state = {
        init:"",
        value: "",
        token : this.props.token.token ,
    }
    // 修改姓名
    change = (value) => {
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8" , 
            "token" : this.props.token.token ,
            "phone" :  this.props.user.data.phone
        };
        axios({
            url: "/set/auther-center/updatepreson",
            method: "post",
            headers: headerJSON,
            data: JSON.stringify({ username:value , phone : this.props.user.data.phone  })
        }).then((res) => {
            this.props.loginer(res.data)
            this.setState({
                value : this.props.user.data.username
            });
        })
    }
    render() {
        return (
            <li>
                <p>用户名</p>
                <WhiteSpace size="lg" />
                <Button className={button} onClick={() => prompt('用户名', '在下方输入新用户名', [
                    { text: '返回' },
                    { text: '确认修改', onPress: value => this.change(value) },
                ], 'default', this.state.value)}
                >{this.state.value}</Button>
            </li>
        )
    }
}
export default connect(
    state => ({
        user: state.user, 
        token : state.token
    }), {
        loginer
    }
)(nickname)